<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,td,th,form,input,select,textarea{margin:0;padding:0;}
body,h1,h2,h3,p,div,li,dt,dd{ font-size:12px; font-family:"微软雅黑"，Arial, Helvetica, sans-serif;}
a{text-decoration:none;outline:none;}
img{vertical-align:top;border:none;}
li{list-style:none;}
table{border-collapse:collapse;}
textarea{resize:none; outline:none; overflow:auto;}

.clear{zoom:1;}
.clear:after{content:''; display:block;clear:both;}

body{background:#ccc;}
#map_nav{ display:inline-block; width:70px;height:24px;text-indent:4px;}
#map_nav:hover{background:url(../images/spirit.gif) no-repeat 0 -288px;text-decoration:none !important;}
#map{width:216px;position:absolute;top:10px;left:0;}
#map .map_top{width:216px; height:10px;background:url(map.png) no-repeat -1px -1px;}
#map .map_center{width:186px;background:url(map.png) repeat-y -223px 0;padding:2px 16px 0px 16px;}
#map .map_btm{width:216px;height:24px;background:url(map.png) no-repeat -1px -10px;}
.map_center ul{border-bottom:1px solid #e4e7e9;padding:4px 0px;}
.map_center h4,.map_center li{height:26px;line-height:26px;}
.map_center li{float:left; padding-right:12px;}
.map_center h4 a{font-size:12px;color:#3061b0;}
.map_center h4 a:hover{font-size:12px;color:#03C;}
.map_center li a{font-size:12px;color:#666;}
.map_center a:hover{text-decoration:underline;color:#999}
.bn{border:none !important;}

#work{height:80px;width:64px;background:url(img/intro.png);position:absolute;top:50%;left:20px;}
#mask{height:100%;width:100%;position:absolute;top:0;left:0;background: #000; opacity: 0.7;filter:alpha(opacity=70);display:none;z-index:10000;}
#wMenu{/*height:500px;*/height:0px;width:0px;border:10px solid #fff;border-bottom:40px solid #fff;background:url(img/wbg.png) no-repeat;position:absolute;top:0;left:0;display:none;z-index:10001;}
.list{color:#666;position:relative;opacity:0;filter:alpha(opacity=0);}
.list a{color:#333;}
.list a:visited{color:#055AAF;}
.list a:hover{color:#055AAF;text-decoration:underline;}
.list a:active{color:#006;}
.list dl{padding:8px 8px; }
.list dt{height:20px;line-height:20px;font-size:18px;font-weight:bold;}
.list dd{line-height:20px;font-size:14px;}
.list .close{width:66px;height:22px;position:absolute;top:540px;right:10px;background:url(img/closelabel.gif);}
.list p{line-height:14px;font-size:12px;color:#00F;font-weight:bold;padding:8px 8px;}

/* work introduction */

</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById('map');
	var prevX=0;
	var prevY=0;
	var disX=0;
	var disY=0;
	var iSpeedX=0;
	var iSpeedY=0;
	var timer=null;
	oDiv.style.left=document.documentElement.clientWidth/2-158+'px';
	startJump();
	oDiv.onmousedown=function(ev){
		var ev=ev||window.event;
		disX=ev.clientX-oDiv.offsetLeft;	
		disY=ev.clientY-oDiv.offsetTop;	
		prevX=ev.clientX;
		prevY=ev.clientY;
		
		clearInterval(timer);
		document.onmousemove=function(ev){
			oDiv.style.cursor='move';
			var ev=ev||window.event;
			var L=ev.clientX-disX;
			var T=ev.clientY-disY;
			if(L<0){
				L=0
			}else if(L>document.documentElement.clientWidth-oDiv.offsetWidth){
				L=document.documentElement.clientWidth-oDiv.offsetWidth
			}
			if(T<0){
				T=0;
			}else if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
				T=document.documentElement.clientHeight-oDiv.offsetHeight;
			}
			oDiv.style.left=L+'px';
			oDiv.style.top=T+'px';
			
			iSpeedX=ev.clientX-prevX;
			iSpeedY=ev.clientY-prevY;
			
			prevX=ev.clientX;
			prevY=ev.clientY;
		};
		
		document.onmouseup=function(){
			document.onmousemove=document.onmouseup=null;
			startJump();
		};
		return false;
	};
	
	function startJump(){
		clearInterval(timer);
		timer=setInterval(function(){
			iSpeedY+=3;
			var L=oDiv.offsetLeft+iSpeedX;
			var T=oDiv.offsetTop+iSpeedY;
			if(T<0){
				T=0;
				iSpeedY*=-1;
				iSpeedY*=0.78;
			}else if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
				T=document.documentElement.clientHeight-oDiv.offsetHeight;
				iSpeedY*=-1;
				iSpeedY*=0.78;
				iSpeedX*=0.78
			}
			
			if(L<0){
				L=0;
				iSpeedX*=-1;
				iSpeedX*=0.78;
			}else if(L>document.documentElement.clientWidth-oDiv.offsetWidth){
				L=document.documentElement.clientWidth-oDiv.offsetWidth;
				iSpeedX*=-1;
				iSpeedX*=0.78;				
			};
			oDiv.style.left=L+'px';
			oDiv.style.top=T+'px';
		},30)
	
	
	}
	var workIntro=(function(){
		var oWork=document.getElementById('work');
		var oMask=document.getElementById('mask');
		var oMenu=document.getElementById('wMenu');
		var oList=getByClass('list')[0];
		var oClose=getByClass('close')[0];
		function rePos(){
			bindEvent(window,'resize',menuMove);
			bindEvent(window,'scroll',menuMove);
			function menuMove(){
				var iH=Math.max(viewH(),scrollH());
				var iLeft=Math.ceil((viewW()-oMenu.offsetWidth)/2);
				var iTop=Math.ceil((viewH()-oMenu.offsetHeight)/2+scrollY());
				oMask.style.height=iH+'px';
				startMove(oMenu,{top:iTop,left:iLeft})
			
			}
		}
		
		function btnClick(){
			oWork.onclick=function(){			
				oMask.style.display='block';
				oMenu.style.display='block';
				oMenu.style.left=(viewW()-oMenu.offsetWidth)/2+'px';
				oMenu.style.top=(viewH()-oMenu.offsetHeight)/2+'px';
				iLs=Math.ceil((viewW()-450)/2);
				iTs=Math.ceil((viewH()-590)/2);
				startMove(oMenu,{height:540,top:iTs},function(){
					startMove(oMenu,{width:430,left:iLs},function(){
						startMove(oList,{opacity:100});
					});
				});
			}
		
		};
		
		function closeClick(){
			oClose.onclick=function(){
				oList.style.opacity=0;
				oList.style.filter = 'alpha(opacity=' +0+ ')';
				oMenu.style.top=0;
				oMenu.style.height=0;
				oMenu.style.width=0;
				oMask.style.display='none';
				oMenu.style.display='none';
				
			}
		}
		
		return{
			c:closeClick,
			b:btnClick,
			r:rePos
		}
	})();
	workIntro.c();
	workIntro.b();
	workIntro.r();
}

</script>
</head>

<body>
<div id="map">
    <div class="map_top"></div>
    <div class="map_center">
        <ul class="clear">
            <h4><a href="#">营销QQ</a></h4>
            <li><a href="#">产品功能</a></dd>
            <li><a href="#">增值服务</a></li>
            <li><a href="#">成功案例</a></li>
            <li><a href="#">如何购买</a></li>
            <li><a href="#">在线帮助</a></li>
            <li><a href="#">产品下载</a></li>
        </ul>
        <ul class="clear">
            <h4><a href="#">企业QQ</a></h4>
            <li><a href="#">产品功能</a></li>
            <li><a href="#">如何购买</a></li>
            <li><a href="#">在线帮助</a></li>
            <li><a href="#">产品下载</a></li>
        </ul>
        <ul class="clear bn">
            <h4><a href="#">优惠专区</a></h4>
            <li><a href="#">最新动态</a></li>
            <li><a href="#">活动公告</a></li>
            <li><a href="#">往期专题</a></li>
        </ul>
    </div>
    <div class="map_btm"></div>
</div> 
<div id="work"></div>
<div id="mask"></div>
<div id="wMenu">
	<div class="list">
        <dl>
            <dt><a href="../../index.html">1.模仿360新建页制作JS效果</a></dt>
            <dd>a)用JsonP跨域请求百度数据，制作搜索框；</dd>
            <dd>b)用Ajax制作天气预报效果；</dd>
            <dd>c)制作更换背景功能，并记录cookie；</dd>
            <dd>d)动态设置图片格子数，并记录cookie；</dd>
            <dd>e)图片可任意交换位置，可随机交换位置；</dd>
            <dd>f)制作图片格子内部轮播图效果。</dd>
        </dl>
        <dl>
            <dt><a href="../b.qq/index.html">2.模仿企业QQ整站</a></dt>
            <dd>a)标签的选择方面，注重标签的语义化</dd>
            <dd>b)CSS命名方面，运用加前缀的方法区分样式所属页面、避免冲突；</dd>
            <dd>c)CSS样式规划方面，考虑扩展性，多用组合，少用继承。</dd>
            <dd>e)处理各浏览器的兼容问题，兼容IE6~10，firefox，chrome等。</dd>
        </dl>
        <dl>
            <dt><a href="../UC/index.html">3.模仿UC首页</a></dt>
            <dd>a)用JS原生实现首页所有效果</dd>
            <dd>b)用运动框架制作首页轮播图、网站地图以及下拉菜单</dd>
        </dl>
        <dl>
            <dt>4.零散demo</dt>
            <dd><a href="../magnifier/index.html">a)放大镜效果；</a></dd>
            <dd><a href="../jumpMenu/index.html">b)可拖拽弹性跳动窗口；</a></dd>
            <dd><a href="../appleMenu/index.html">c)苹果菜单效果</a></dd>
            <dd><a href="../movingPic/1.html">d)常见轮播图效果合集</a></dd>
			<dd><a href="../delay/delay.html">e)延迟加载效果</a></dd>
        </dl>
        <p>说明：此网站内各模仿页面仅用来展示个人作品，不用于任何商业用途</p>
        <div class="close"></div>
    </div>
</div> 
</body>
</html>
